<template>
  <div class="container">
    <div id="map" />
    <div v-if="latlngs.length > 0" class="btn-container">
      <el-button type="primary" size="medium" @click="drawFinish">完成绘制</el-button>
    </div>
  </div>
</template>

<script type="text/javascript">
import { lmapConfig } from '@/utils/constant'
import '@geoman-io/leaflet-geoman-free'
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css'
export default {
  props: {
    center: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      map: null,
      layer: [],
      latlngs: []
    }
  },
  mounted() {
    // eslint-disable-next-line no-undef
    this.map = L.map('map').setView(this.center, lmapConfig.zoom)
    lmapConfig.urls.forEach((item) => {
      // eslint-disable-next-line no-undef
      L.tileLayer(item).addTo(this.map)
    })

    this.map.pm.addControls({
      position: 'topleft'
    })
    this.map.pm.setPathOptions({
      color: 'blue',
      fillColor: 'pink',
      fillOpacity: 0.4
    })
    this.map.pm.setLang('zh')
    this.map.on('pm:create', (e) => {
      const lntlngs = e.layer._latlngs[0]
      lntlngs.forEach(item => {
        this.latlngs.push([item.lng, item.lat].join(','))
      })
      this.latlngs = this.latlngs.join(';')
      this.map.pm.disableDraw()
    })
    this.map.on('pm:remove', (e) => {
      this.latlngs = []
    })
    this.map.on('pm:globaldragmodetoggled', e => {
      console.log(e.map)
    })
  },
  methods: {
    drawFinish() {
      this.$emit('drawFinish', this.latlngs)
    }
  }
}
</script>

<style lang="scss" scoped>
  #map {
    width: 100%;
    height: 100%;
  }
  .container {
    position:relative;
    width:100%;
    height:90vh;
    .btn-container{
      position:absolute;
      right:24px;
      bottom:24px;
      z-index:9999;
    }
  }
</style>
